<template>
<div>
    <el-button @click="handleScanPayVisible" type="text" size="small">支付二维码</el-button>
    <!-- 支付二维码窗口 -->
    <el-dialog
        width="40%"
        title="支付二维码窗口"
        :visible.sync="dialogVisible">
        <div v-loading="loading" class="qr_code_pay_wrap">

            <div class="qrcode">
                <img v-if="qrcode" :src="qrcode" alt />
            </div>
            <div class="amount_wrap">
                支付金额：<span class="amount">￥{{(pay.amount / 100).toFixed(2)}}元</span>
            </div>
        </div>


        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关 闭</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import { getUUID } from "@/libs";

export default {
    data() {
        return {
            loading: true,
            dialogVisible: false,

            pay: {
                appId: 'wxcc772427b80340a6',
                body: '[熊猫车品]1688JY',
                amount: 1
            },
            qrcode: null
        }
    },

    mounted() {
        this.$nextTick(function() {

        });
    },

    methods: {

        async handleScanPayVisible() {
            this.loading = true
            this.dialogVisible = true
            this.qrcode = null
            this.handleScanPay()
        },

        /**
         * 扫码支付
         */
        async handleScanPay() {
            const res = await this.$http({
                url: '/api/wx/scan/pay',
                method: 'POST',
                data: this.pay
            })
            this.loading = false
            this.qrcode = res
        }


    }


};
</script>

<style lang="scss" scoped>
.qr_code_pay_wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .qrcode{
        width: 400px;
        height: 400px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .amount_wrap{
        font-size: 18px;
        .amount{
            color: red;
        }
    }
}
</style>
